<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{hobby}}</h1>
      
          文本框<input type="text" v-model="msg">
          <hr>
          单选:
          <input type="radio" value="nan" v-model="sex"/>男
          <input type="radio" value="nv"  v-model="sex"/>女
          <hr>
          
          <input type="checkbox" value="eat"   v-model="hobby">吃饭
          <input type="checkbox" value="sleep"  v-model="hobby">睡觉
          <input type="checkbox" value="fire"   v-model="hobby">打豆豆
          <hr>
          
          <select v-model="city">
              <option value="bj">北京</option>
              <option value="sh">上海</option>
              <option value="gz">广州</option>
              <option value="sz">深圳</option>
          </select>


        
    </div>
</body>

</html>
<script>
   
    const VM = new Vue({
        el: '#app',
        data() {
            return {
              msg:'我是祖国的老花骨朵',
              sex:'nv',
              hobby:['eat'],
              city:'sz'
            }
        }
    })
</script>